<template>
  <div id="app" ref="app">
    <button @click="exportPDF">导出PDF</button>
    <div>
      <h3>组件的本质</h3>
      <span
        >组件配置 => VueComponent实例 => render() => Virtual DOM => DOM</span
      >
    </div>
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/slot-aync">Aboslot-ayncut</router-link> |
      <router-link to="/apiSet">ApiSet</router-link> |
      <router-link to="/mixin">Mixin</router-link> |
      <router-link to="/directive">自定义指令</router-link> |
      <router-link to="/plugin">插件</router-link> |
      <router-link to="/stateData">vuex</router-link> |
      <router-link to="/confirm">弹窗</router-link>
    </div>
    <router-view />
  </div>
</template>

<script type="text/ecmascript-6">
import downloadPDF from "@/utils/htmlToPdf";
export default {
  data() {
    return {
      arr: [111, 222],
    };
  },
  components: {},
  methods: {
    exportPDF() {
      downloadPDF(this.$refs.app);
    },
  },
  mounted() {
    // console.log(this.arr);
    // console.log([111, 222]);
  },
};
</script>
<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>
